<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a="http://richfaces.org/a4j"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	template="/layout/template-base.xhtml" contentType="text/html"
	markupType="xhtml">

	<ui:define name="content">
	
		<ui:include src="/user.xhtml" />
		
		<h:form>
			<s:decorate template="/layout/content.xhtml">
				<a:outputPanel rendered="#{usuariosAction.listarUsuarios}">
					<h:outputText value="#{messages['users.table.title']}"
						styleClass="title color-orange" />
					<rich:panel styleClass="panel border-color-orange">
						<rich:dataTable columnClasses="data-table-cell" id="sociosTable"
							value="#{usuariosAction.usuarios}" styleClass="data-table"
							var="item" rows="10">
							<rich:column filterBy="#{item.nombre} #{item.primerApellido} #{item.segundoApellido}">
								<f:facet name="header">
									<h:outputText value="#{messages['users.table.name']}" />
								</f:facet>
								<h:outputText value="#{item.nombre} #{item.primerApellido} #{item.segundoApellido}" />
							</rich:column>
							<rich:column filterBy="#{item.dni}">
								<f:facet name="header">
									<h:outputText value="#{messages['users.table.id.number']}" />
								</f:facet>
								<h:outputText value="#{item.dni}" />
							</rich:column>
							<rich:column filterBy="#{item.email}">
								<f:facet name="header">
									<h:outputText value="#{messages['users.table.email']}" />
								</f:facet>
								<h:outputText value="#{item.email}" />
							</rich:column>
							<rich:column filterBy="#{item.perfil.nombre}">
								<f:facet name="header">
									<h:outputText value="#{messages['users.table.profile']}" />
								</f:facet>
								<h:outputText value="#{item.perfil.nombre}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['users.table.actions']}" />
								</f:facet>
								<a:commandLink action="#{usuariosAction.editar()}" reRender="base" 
									rendered="#{usuario.perfil.administrador or usuario.perfil.usuariosModificar}">
									<h:graphicImage value="/img/icons/16/edit.png" alt="#{messages['users.actions.edit']}" title="#{messages['users.actions.edit']}" />
									<f:setPropertyActionListener target="#{usuariosAction.usuario}" value="#{item}" />
								</a:commandLink>
							</rich:column>
						</rich:dataTable>
					</rich:panel>
	
					<rich:datascroller for="sociosTable" align="center"
						selectedStyleClass="border-color-orange color-orange"
						styleClass="top-margin" tableStyleClass="border-color-orange no-bg" />
				</a:outputPanel>
				<a:outputPanel rendered="#{usuariosAction.editarUsuario}">
					<h:outputText value="#{messages['users.edit.data']}"
						styleClass="title color-orange" />
					<h:panelGrid styleClass="panel border-color-orange" columns="4">
						
						<h:outputText value="#{messages['users.edit.id.number']}" styleClass="color-orange" />
						<h:inputText value="#{usuariosAction.usuario.dni}" />
						
						<h:outputText value="#{messages['users.edit.name']}" styleClass="color-orange" />
						<h:inputText value="#{usuariosAction.usuario.nombre}" />
						
						<h:outputText value="#{messages['users.edit.surname']}" styleClass="color-orange" />
						<h:inputText value="#{usuariosAction.usuario.primerApellido}" />
						
						<h:outputText value="#{messages['users.edit.lastname']}" />
						<h:inputText value="#{usuariosAction.usuario.segundoApellido}" />
						
						<h:outputText value="#{messages['users.edit.birth.date']}" />
						<rich:calendar value="#{usuariosAction.usuario.nacimiento}" datePattern="dd/MM/yyyy" />
						
						<h:outputText value="#{messages['users.edit.genre']}" />
						<h:selectOneMenu value="#{usuariosAction.usuario.sexo}">
							<f:selectItem />
							<f:selectItem itemValue="FEMENINO" itemLabel="#{messages['users.edit.genre.female']}" />
							<f:selectItem itemValue="MASCULINO" itemLabel="#{messages['users.edit.genre.male']}" />
						</h:selectOneMenu>
						
					</h:panelGrid>
					<s:div styleClass="clear-it" />
					<h:outputText value="#{messages['users.edit.contact']}"
						styleClass="title color-green" />
					<h:panelGrid styleClass="panel border-color-green" columns="4">
						
						<h:outputText value="#{messages['users.edit.address']}" />
						<h:inputText value="#{usuariosAction.usuario.domicilio}" />
						
						<h:outputText value="#{messages['users.edit.postal']}" />
						<h:inputText value="#{usuariosAction.usuario.cp}" />
						
						<h:outputText value="#{messages['users.edit.city']}" />
						<h:inputText value="#{usuariosAction.usuario.localidad}" />
						
						<h:outputText value="#{messages['users.edit.state']}" />
						<h:inputText value="#{usuariosAction.usuario.provincia}" />
						
						<h:outputText value="#{messages['users.edit.country']}" />
						<h:inputText value="#{usuariosAction.usuario.pais}" />
						
						<h:outputText value="#{messages['users.edit.email']}" styleClass="color-green" />
						<h:inputText value="#{usuariosAction.usuario.email}" />
						
						<h:outputText value="#{messages['users.edit.mobile']}" />
						<h:inputText value="#{usuariosAction.usuario.movil}" />
						
						<h:outputText value="#{messages['users.edit.phone']}" />
						<h:inputText value="#{usuariosAction.usuario.fijo}" />
						
					</h:panelGrid>
					<s:div styleClass="clear-it" />
					<h:outputText value="#{messages['users.edit.other']}"
						styleClass="title color-blue" />
					<h:panelGrid styleClass="panel border-color-blue" columns="4">
						
						<h:outputText value="#{messages['users.edit.username']}" styleClass="color-blue"
							rendered="#{usuario.perfil.administrador or usuario.perfil.usuariosModificarAcceso or usuariosAction.usuario.id == null}" />
						<h:inputText value="#{usuariosAction.usuario.user}"
							rendered="#{usuario.perfil.administrador or usuario.perfil.usuariosModificarAcceso or usuariosAction.usuario.id == null}" />
							
						<h:outputText value="#{messages['users.edit.password']}"
							rendered="#{usuario.perfil.administrador or usuario.perfil.usuariosModificarAcceso}" />
						<h:inputSecret value="#{usuariosAction.pass}"
							rendered="#{usuario.perfil.administrador or usuario.perfil.usuariosModificarAcceso}" />
						
						<h:outputText value="#{messages['users.edit.registration.date']}" styleClass="color-blue" />
						<rich:calendar value="#{usuariosAction.usuario.alta}" datePattern="dd/MM/yyyy" />
						
						<h:outputText value="#{messages['users.edit.leaving.date']}" rendered="#{usuario.perfil.administrador or usuario.perfil.usuariosEliminar}" />
						<rich:calendar value="#{usuariosAction.usuario.baja}" rendered="#{usuario.perfil.administrador or usuario.perfil.usuariosEliminar}" datePattern="dd/MM/yyyy" />
						
						<h:outputText value="#{messages['users.edit.profile']}" styleClass="color-blue" 
							rendered="#{usuario.perfil.administrador or usuariosAction.usuario.id == null or usuario.perfil.perfilesAsignar}" />
						<h:selectOneMenu value="#{usuariosAction.usuario.perfil}"
							rendered="#{usuario.perfil.administrador or usuariosAction.usuario.id == null or usuario.perfil.perfilesAsignar}">
							<f:selectItem itemValue="0" itemLabel="" />
							<s:selectItems value="#{usuariosAction.perfiles}" var="perfil" label="#{perfil.nombre}" />
							<s:convertEntity />
						</h:selectOneMenu>
						
						<h:outputText value="#{messages['users.edit.web']}" />
						<h:inputText value="#{usuariosAction.usuario.web}" />
						
						<h:outputText value="#{messages['users.edit.facebook']}" />
						<h:inputText value="#{usuariosAction.usuario.facebook}" />
						
						<h:outputText value="#{messages['users.edit.twitter']}" />
						<h:inputText value="#{usuariosAction.usuario.twitter}" />
						
					</h:panelGrid>
				</a:outputPanel>
	
				<div class="clear-it"></div>
			</s:decorate>
			
			<s:decorate template="/layout/buttonbar.xhtml">
				<a:commandButton value="#{messages['users.actions.new']}" actionListener="#{usuariosAction.nuevo()}"
					styleClass="btn btn-green" rendered="#{(usuario.perfil.administrador or usuario.perfil.usuariosCrear) and usuariosAction.listarUsuarios}" reRender="base" />
				<a:commandButton value="#{messages['users.actions.save']}" actionListener="#{usuariosAction.guardarNuevoUsuario()}" styleClass="btn btn-green" 
					rendered="#{(usuario.perfil.administrador or usuario.perfil.usuariosCrear) and usuariosAction.editarUsuario and usuariosAction.usuario.id == null}" reRender="base" />
				<a:commandButton value="#{messages['users.actions.save.changes']}" actionListener="#{usuariosAction.guardarModificacionUsuario()}" styleClass="btn btn-green" 
					rendered="#{(usuario.perfil.administrador or usuario.perfil.usuariosModificar) and usuariosAction.editarUsuario and usuariosAction.usuario.id != null}" reRender="base" />
				<a:commandButton value="#{messages['users.actions.bands']}" styleClass="btn btn-pink" reRender="memberPanelDiv" action="#{componentesAction.cargarGrupos()}"
					rendered="#{(usuario.perfil.administrador or usuario.perfil.componentesCrear) and usuariosAction.usuario.id != null and usuariosAction.editarUsuario}">
					<f:setPropertyActionListener target="#{componentesAction.usuario}" value="#{usuariosAction.usuario}" />
				</a:commandButton>
				<h:commandButton value="#{messages['users.actions.list']}" styleClass="btn btn-pink tiny-font" 
					rendered="#{usuariosAction.listarUsuarios}" action="#{usuariosReport.listado()}">
					<f:setPropertyActionListener target="#{usuariosReport.usuarios}" value="#{usuariosAction.usuarios}" />
				</h:commandButton>
				<a:commandButton value="#{messages['users.actions.cancel']}" styleClass="btn btn-orange" reRender="base"
					rendered="#{usuariosAction.editarUsuario}" actionListener="#{usuariosAction.volver()}" />
				<h:commandButton value="#{messages['users.actions.back']}"
					action="/menu.htm" styleClass="btn btn-blue" />
			</s:decorate>
		</h:form>
		<s:div id="memberPanelDiv">
			<rich:modalPanel id="memberPanel" showWhenRendered="true" width="500" height="280" rendered="#{componentesAction.showMemberPanel}">
				<f:facet name="header">
                    <h:outputText value="#{messages['users.edit.member.title']}" style="padding-right: 15px;" />
                </f:facet>
                <f:facet name="controls">
                    <h:panelGroup>
						<h:form>
	                        <h:graphicImage value="/img/icons/16/cross.png" styleClass="hide-link" id="closeMemberPanel">
	                        	<a:support action="#{componentesAction.hideMemberPanel()}" event="onclick" />
	                        </h:graphicImage>
	                        <rich:componentControl for="memberPanel" attachTo="closeMemberPanel" operation="hide" event="onclick" />
						</h:form>
                    </h:panelGroup>
                </f:facet>
				<h:form>
                <s:div styleClass="clear-it" />
					<h:outputText value="#{messages['users.edit.member.data']}"
						styleClass="title color-green" />
					<h:panelGrid styleClass="modal-panel border-color-green" columns="2">
	
						<h:outputText value="#{messages['users.edit.member.registration.date']}" styleClass="color-green" />
						<rich:calendar value="#{componentesAction.componente.alta}" datePattern="dd/MM/yyyy" />
						
						<h:outputText value="#{messages['users.edit.member.leaving.date']}" rendered="#{usuario.perfil.administrador or usuario.perfil.componentesEliminar}" />
						<rich:calendar value="#{componentesAction.componente.baja}" rendered="#{usuario.perfil.administrador or usuario.perfil.componentesEliminar}" datePattern="dd/MM/yyyy" />
												
						<h:outputText value="#{messages['users.edit.member.band']}" styleClass="color-green" />
						<h:selectOneMenu value="#{componentesAction.grupo}">
							<f:selectItem itemValue="" />
							<s:selectItems value="#{componentesAction.grupos}" var="grupo" label="#{grupo.nombre}" />
							<s:convertEntity />
						</h:selectOneMenu>
						
						<h:outputText value="#{messages['users.edit.member.instrument']}" styleClass="color-green" />
						<h:inputText value="#{componentesAction.componente.actividad}" />
						
						<h:outputLabel value="#{messages['users.edit.member.front.member']}" for="representante" />
						<h:selectBooleanCheckbox value="#{componentesAction.componente.representante}" id="representante" />
						
					</h:panelGrid>
					
					<s:div styleClass="center top-margin">
						<a:commandButton value="#{messages['users.edit.member.action']}" actionListener="#{componentesAction.guardarComponente()}" reRender="memberPanelDiv"
							styleClass="btn btn-green" rendered="#{usuario.perfil.administrador or usuario.perfil.componentesCrear}" />
					</s:div>
				</h:form>
			</rich:modalPanel>
		</s:div>
	</ui:define>
	
</ui:composition>
